<template>
  <v-snackbar top text v-model="visible" :color="color" :timeout="timeout">
    {{ this.$store.state.snackbar.msg }}
    <!-- 关闭按钮 -->
    <template v-slot:action="{ attrs }" >
      <v-btn v-bind="attrs" v-if="showClose" icon @click="close" :color="color" style="background-color: #fff">
        <v-icon>mdi-close</v-icon>
      </v-btn>
    </template>
  </v-snackbar>
</template>

<script>
export default {
  name: "Snackbar",
  data() {
    return {};
  },
  computed: {
    visible: {
      get: function() {
        return this.$store.state.snackbar.visible;
      },
      set: function() {}
    },
    showClose() {
      return this.$store.state.snackbar.showClose;
    },
    color() {
      return this.$store.state.snackbar.color;
    },
    timeout() {
      return this.$store.state.snackbar.timeout;
    }

  },
  methods: {
    close() {
      this.$store.commit("snackbar/CLOSE_SNACKBAR");
    },
  },

}
</script>

<style scoped>

</style>
